<!-- 登录页面 -->
<template>
    <div class="login">
        <div class="logo"><img src="../assets/logo.jpg" alt=""></div>
        <!-- 手机号 -->
        <input-group  type="text" v-model='phone' placeholder="手机号" :disabled='disabled' :error='errors.phone' />
        <input-group type="text" v-model='password' placeholder="请输入密码" 
        :disabled='disabled' :error='errors.phone'/>
        <!-- 用户服务协议 -->
        <div class="login_des">
            <p>新用户登录即立即注册，表示已同意</p>
            <span>《用户服务协议》</span>
        </div>
        <div class="login_btn">
        <button :disabled='isClick' @click='btnLogin()'>登录</button>
        </div>
        <div class="tips">
            <div>测试账号为13729592832</div>
            <div>密码为123456</div>
        </div>
    </div>
  </template>

<script>
    //1、引入组件
    import inputGroup from '../components/InputGroup.vue';
    import axios from 'axios';
    export default {
        name: 'login',
        //2、注册组件
        components: {
            inputGroup
        },
        //定义在输入框中要用到的属性
        data() {
            return {
                phone: "",
                password: "",
                errors: {},
                disabled: false,
            }
        },
        computed: {
            //判断两个输入框格式都正确启动按钮
            isClick() {
                if (!this.phone || !this.password) return true;
                else return false;
            }
        },
        methods: {
            //验证手机号码是否合法
            validataPhone() {
                if (!this.phone) {
                    this.errors = {
                        phone: '手机号码不能为空'
                    };
                    return false;
                } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
                    this.errors = {
                        phone: '请填写正确的手机号码'
                    };
                    return false;
                } else {
                    this.errors = {};
                    return true;
                }
            },
            // 验证密码是否6位数
            validataPassword() {
                if (!this.password) {
                    this.errors = {
                        password: '密码不能为空'
                    };
                    return false;
                } else if (!/^\d{6}$/.test(this.password)) {
                    this.errors = {
                        password: '请填写6位数的密码'
                    };
                    return false;
                } else {
                    this.errors = {};
                    return true;
                }
            },

            //登陆按钮
            btnLogin() {
                // 取消错误提醒
                this.errors = {};
                if (this.validataPhone() == this.validataPassword()) {
                    let data = {
                        'phone': this.phone,
                        "password": this.password
                    }
                    axios.post(`http://joeweiwx.xyz:8005/users`, data).then(res => {
                        console.log(res);
                        this.$router.push('/');
                    });
                    this.$store.commit('addUserLogin', this.phone)
                    this.$router.push('/home')
                } else {
                    alert("请确认账号和密码是否填错!!!")
                }
            }
        }
    }
</script>
<style scoped>
    .login {
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
    }
    
    .logo {
        text-align: center;
    }
    
    .logo img {
        width: 150px;
    }
    
    .text_group,
    .login_des,
    .login_btn {
        margin-top: 20px;
    }
    
    .login_des {
        color: #aaa;
        line-height: 22px;
    }
    
    .login_des span {
        color: #4d90fe;
    }
    
    .login_btn button {
        width: 100%;
        height: 40px;
        background-color: #48ca38;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        border: none;
        outline: none;
    }
    
    .login_btn button[disabled] {
        background-color: #8bda81;
    }
    
    .tips {
        text-align: center;
        transform: translateY(135px);
        font-size: 1.3rem
    }
</style>